<template>
  <div class="container" v-loading="loading">
    <el-form
      :model="detailsForm"
      :rules="rules"
      ref="detailsForm"
      label-position="top"
    >
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="库区" prop="location">
            <WareCascader @updateLocation="updateLocation" ref="WareCascader" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="库位编码" prop="code">
            <el-input
              v-model="detailsForm.code"
              placeholder="请输入"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="库位名称" prop="name">
            <el-input
              v-model="detailsForm.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="温度类型" prop="temperatureType">
            <el-select
              v-model="detailsForm.temperatureType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in temperatureList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="承重类型" prop="bearingType">
            <el-select
              v-model="detailsForm.bearingType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in bearingList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用途属性" prop="useType">
            <el-select
              v-model="detailsForm.useType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in useList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓库状态" prop="status">
            <el-radio-group v-model="detailsForm.status" style="width: 100%">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="承载体积" prop="maxVolume">
            <el-input v-model="detailsForm.maxVolume" placeholder="请输入">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="承载上限" prop="maxNum">
            <el-input v-model="detailsForm.maxNum" placeholder="请输入">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="承载重量" prop="maxWeight">
            <el-input v-model="detailsForm.maxWeight" placeholder="请输入">
              <template slot="append">Kg</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="库位排/列/层">
            <el-row :gutter="10" style="padding: 0">
              <el-col :span="8">
                <el-input
                  v-model="detailsForm.locationRow"
                  placeholder="请输入"
                >
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input
                  v-model="detailsForm.locationColumn"
                  placeholder="请输入"
                >
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input
                  v-model="detailsForm.locationLayer"
                  placeholder="请输入"
                >
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库位长/宽/高">
            <el-row :gutter="10" style="padding: 0">
              <el-col :span="8">
                <el-input
                  v-model="detailsForm.locationLength"
                  placeholder="请输入"
                >
                  <template slot="append">cm</template>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input
                  v-model="detailsForm.locationWidth"
                  placeholder="请输入"
                >
                  <template slot="append">cm</template>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input
                  v-model="detailsForm.locationHigh"
                  placeholder="请输入"
                >
                  <template slot="append">cm</template>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="labelbutton">
          <button
            class="penpel resetbutton"
            @click="$router.push('/manageinfo/warehouse')"
          >
            返回
          </button>
          <button class="penpel searchbutton" @click="addLocation">确认</button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import EmunList from '@/constant/warehouse'
import areaEmun from '@/constant/area'
import { getKW, addLocation, getLoca, updateLocation } from '@/api/location'

const rules = {
  location: [{ required: true, message: '请选择库区' }],
  name: [{ required: true, message: '请输入库区名称', trigger: ['blur'] }],
  temperatureType: [
    { required: true, message: '请选择温度类型', trigger: ['blur'] }
  ],
  warehouseId: [
    { required: true, message: '请选择所属仓库', trigger: ['blur', 'change'] }
  ],
  status: [{ required: true, message: '请选择仓库状态', trigger: ['blur'] }],
  bearingType: [{ required: true, message: '请选择承重类型' }],
  useType: [{ required: true, message: '请选择用途属性' }],
  maxVolume: [{ required: true, message: '请输入承载体积', trigger: ['blur'] }],
  maxNum: [{ required: true, message: '请输入承载上限', trigger: ['blur'] }],
  maxWeight: [{ required: true, message: '请输入承载重量', trigger: ['blur'] }]
}
export default {
  name: 'AddDetails',
  data () {
    return {
      detailsForm: {
        areaId: '',
        code: '',
        warehouseId: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        maxNum: '',
        maxVolume: '',
        status: '1',
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        locationLength: '',
        locationWidth: '',
        locationHigh: '',
        location: []
      },
      wareType: EmunList.wareType,
      temperatureList: areaEmun.temperatureType,
      bearingList: areaEmun.bearingType,
      useList: areaEmun.useType,
      rules,
      loading: false,
      warehouseList: []
    }
  },
  created () {
    this.getCK()
  },
  methods: {
    updateLocation (value) {
      this.detailsForm.location = value
      this.detailsForm.warehouseId = value[0]
      this.detailsForm.areaId = value[1]
    },
    // 获取仓库
    async getCK () {
      this.loading = true
      if (this.$route.params.id) {
        const res = await getLoca(this.$route.params.id)
        this.detailsForm = res
        this.detailsForm.status = res.status.toString()
        this.detailsForm.location = [res.warehouseId, res.areaId]
        this.$refs.WareCascader.locations = [res.warehouseId, res.areaId]
      } else {
        this.detailsForm.code = await getKW()
      }
      this.loading = false
    },
    // 提交
    async addLocation () {
      await this.$refs.detailsForm.validate()
      if (this.detailsForm.id) {
        await updateLocation({
          ...this.detailsForm,
          status: Number(this.detailsForm.status)
        })
        this.$message.success('编辑成功')
      } else {
        await addLocation({
          ...this.detailsForm,
          locationColumn: Number(this.detailsForm.locationColumn),
          locationLayer: Number(this.detailsForm.locationLayer),
          locationRow: Number(this.detailsForm.locationRow)
        })
        this.$message.success('添加成功')
      }
      this.$router.push('/manageinfo/location')
      this.$refs.detailsForm.resetFields()
    }
  },
  // 销毁之前清空
  beforeDestroy () {
    this.detailsForm = {
      code: '',
      warehouseId: '',
      temperatureType: '',
      bearingType: '',
      useType: '',
      personName: '',
      phone: '',
      status: '1'
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  .penpel {
    @include penpel;
    width: 170px;
  }
  .container {
    min-height: 410px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding-top: 31px;
    padding-bottom: 30px;
    .el-row {
      padding: 0 30px;
    }
    .labelbutton {
      text-align: center;
      .searchbutton {
        @include searchbutton;
      }
      .resetbutton {
        @include resetbutton;
        margin-right: 20px;
      }
    }
  }
  .is-disabled {
    ::v-deep .el-input__inner {
      background-color: #f3ebeb !important;
    }
  }
</style>
